<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import en from 'element-plus/lib/locale/lang/en'
import "@/style/index.css"
import { reactive, onMounted, onBeforeMount } from 'vue';
import { useThemeConfig } from '@/store/modules/themeConfig';
import { followSystemModel, local } from '@/utils';
import { ColorModel, GlobalI18n } from '@/global/const';
const storesThemeConfig = useThemeConfig();
const dictionary = {
  'en': en,
  'zh-cn': zhCn
}
const state = reactive({
  locale: null as any
})
const setGlobalConfig = (obj: Record<string, any>) => {
  state.locale = obj.locale
  storesThemeConfig.setGlobalI18n(obj.lang)
}

onMounted(() => {
  const globalI18n = local.get(GlobalI18n) as 'en' | 'zh-cn'
  if (globalI18n) {
    setGlobalConfig({ locale: dictionary[globalI18n], lang: globalI18n })
  } else {
    if (window.navigator.language.indexOf('en') !== -1) {
      setGlobalConfig({ locale: en, lang: 'en' })
    } else {
      setGlobalConfig({ locale: zhCn, lang: 'zh-cn' })
    }
  }
})

onBeforeMount(() => {
  const newStore = Object.assign({}, storesThemeConfig.themeConfig, { primary: local.get(ColorModel) as string, globalI18n: local.get(GlobalI18n) as string })
  storesThemeConfig.$patch((state) => {
    state = {
      ...state,
      themeConfig: newStore
    }
  })
  followSystemModel() // 设置白天黑夜模式
})
</script>

<template>
  <el-config-provider :locale="state.locale">
    <router-view v-slot="{ Component }">
      <transition name="fade">
        <component :is="Component"></component>
      </transition>
    </router-view>
  </el-config-provider>
</template>

<style scoped>
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active {
  transition: opacity .5s ease-in;
}

.fade-leave-active {
  transition: all 1s ease;
  transition: opacity .5s ease-out;
}
</style>
